﻿import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 1.4
import QtQuick.Controls 2.12
import QtQuick.Controls.Styles 1.4
import QtQuick.Layouts 1.1
import cus.BtnClick 1.0
import view.MainView 1.0
import view.MenuView 1.0
import QtGraphicalEffects 1.12
import QtWebEngine 1.1

import "qrc:/util/"
import "qrc:/cus/"

ApplicationWindow {
    CommonUtil { id:commonUtil }
    BtnClick{ id :itemBtnClick }
    MainView{ id: mainView }
    MenuView{ id: menuView }

    id:mainWindow
    width: 640
    height: 480
    visible: true
    title: qsTr("note")

    menuBar: MenuBar {
        id :menuMain
        delegate: MenuBarItem {
            id: menuBarItem
            contentItem: Text {
                text: menuBarItem.text
                font: menuBarItem.font
                opacity: enabled ? 1.0 : 0.3
                color: menuBarItem.highlighted ? "#ffffff" : "#21be2b"
                horizontalAlignment: Text.AlignLeft
                verticalAlignment: Text.AlignVCenter
                elide: Text.ElideRight
            }
            background: Rectangle {
                implicitWidth: 20
                implicitHeight: 20
                opacity: enabled ? 1 : 0.3
                color: menuBarItem.highlighted ? "#21be2b" : "transparent"
            }
        }

        background: Rectangle {
            implicitWidth: 20
            implicitHeight: 20
            color: "white"

            Rectangle {
                color: "#21be2b"
                width: parent.width
                height: 1
                anchors.bottom: parent.bottom
            }
        }

        Menu {
            title: qsTr("文件")
            Action { text: qsTr("新建...") }
            Action { text: qsTr("打开...") }
            Action {
                text: qsTr("设置");
                onTriggered: {
                    let str = menuView.openSettings();
                    tabView.addTabCus("设置", str, 'txt')
                    console.log(str)
                }
            }
            Action { text: qsTr("保存为") }
            MenuSeparator { }
            Action { text: qsTr("退出") }
            delegate: MenuItemCus { }
        }
        Menu {
            title: qsTr("编辑")
            delegate: MenuItemCus{}
            Action { text: qsTr("剪切") }
            Action { text: qsTr("复制") }
            Action { text: qsTr("粘贴") }
        }
        Menu {
            delegate: MenuItemCus{}
            title: qsTr("帮助")
            Action { text: qsTr("关于") }
        }
    }

    SplitView{
        anchors.fill: parent
        orientation: Qt.Horizontal
        // 侧边栏
        Rectangle{
            id:treeList
            color: "lightgreen"
            Layout.minimumWidth: 180

            //侧边栏搜索
            Rectangle{
                id:barSearch
                radius: 5
                border.color: "black"
                anchors{
                    top:treeList.top
                    left: treeList.left
                    right:treeList.right
                    leftMargin: 5
                    topMargin: 5
                    rightMargin: 5
                }
                color: "pink"
                height: 30
                width: parent.width

                layer.enabled: true
                layer.effect: OpacityMask {
                    maskSource: Rectangle {
                        width: barSearch.width
                        height:  barSearch.height
                        radius: 5
                    }
                }

                TextEdit{
                    id: txtSearch
                    anchors.left: parent.left
                    anchors.top: parent.top
                    anchors.bottom:  parent.bottom
                    anchors.right: btnSearch.left
                    clip:true

                    font.pixelSize:14
                    verticalAlignment: Text.AlignVCenter // 居中
                    padding: 5
                    wrapMode: TextEdit.Wrap
                    onTextChanged: {
                        console.log(treeList.width - 60)
                    }
                }

                Button {
                    id: btnSearch
                    width: 40
                    anchors.top:parent.top;
                    anchors.bottom: parent.bottom;
                    anchors.right: parent.right
                    text: qsTr("查询")
                    onClicked: {
                        itemBtnClick.doBtnClick("111")
                        // console.log(myModel)
                    }
                }
            }

            // 文件列表
            ListView {
                property double savePos: 0
                property int tabWidth:10

                id: fileList
                objectName: "fileList"
                clip:true
                model: myModel
                onModelChanged: {
                    // console.log(fileList)
                    fileList.ScrollBar.vertical.setPosition(fileList.savePos)
                }
                contentWidth: 180

                anchors{
                    top: barSearch.bottom
                    left: parent.left
                    right: parent.right
                    bottom: parent.bottom
                    topMargin: 5
                }

                highlight: Rectangle { color: "lightblue"; radius: 5 } // 选中元素
                highlightFollowsCurrentItem: true
                highlightMoveDuration: 0

                flickableDirection: Flickable.HorizontalAndVerticalFlick
                ScrollBar.vertical: ScrollBar {id: vScrollBar  }
                ScrollBar.horizontal: ScrollBar{}

                // 内部元素
                delegate: Item {
                    anchors{ // 用来区分父子集
                        left:parent.left
                        right: parent.right
                        leftMargin: tab * fileList.tabWidth
                    }
                    height: 20

                    Image { // 下拉图标
                        id:itemImg
                        height: parent.height
                        verticalAlignment: Image.AlignVCenter
                        fillMode:Image.Pad
                        anchors{
                            left: parent.left
                            leftMargin: 5
                        }
                        visible: qsTr(type) === "dir"
                        source: "qrc:img/open.png"
                    }

                    Image { // 文件图标
                        id:typeImg
                        height: parent.height
                        verticalAlignment: Image.AlignVCenter
                        fillMode:Image.Pad
                        anchors{
                            left: parent.left
                            leftMargin: 5+16+5
                        }
                        source: "qrc:img/"+qsTr(type)+".png"
                    }

                    Text {
                        anchors{
                            left: parent.left
                            leftMargin: 5+16*2+5+5 // 图片大小
                        }
                        height: parent.height
                        text: name
                        verticalAlignment: Text.AlignVCenter
                    }

                    MouseArea{
                        anchors.fill: parent
                        onClicked: {
                            if(itemImg.source == "qrc:img/open.png"){
                                itemImg.source = "qrc:img/close.png"
                            } else {
                                itemImg.source = "qrc:img/open.png"
                            }

                            let tabViewTmp = tabView;
                            let typeName = type
                            let tabName = name
                            let commonUtilTmp = commonUtil
                            fileList.currentIndex = index
                            fileList.savePos = vScrollBar.position
                            let txt = mainView.openFile(modelData); // 传递数据
                            if(qsTr(typeName) === 'file'){
                                let cont = tabViewTmp.addTabCus(tabName, txt)
                                // console.log(cont.children[0])
                                let webView = cont.children[0]
                                console.log(webView.page)
                                commonUtilTmp.setTimeout(
                                            ()=>{
                                                console.log(txt.replace(/\r\n/g,'\\r\\n'))
                                                txt = txt.replace(/\r\n/g,'\\r\\n')
                                                console.log('show("'+txt+'")')
                                                webView.runJavaScript('show("'+txt+'")')
                                            },2000)

                            }// 传递数据
                            // console.log(txt)
                        }
                    }

                    Component.onCompleted: {
                        // console.log(JSON.stringify(modelData))
                        let mo = modelData;
                        fileList.contentWidth
                                = Math.max(fileList.contentWidth
                                           ,commonUtil.getTextWidth(mo.name,font.pixelSize)+50+mo.tab*fileList.tabWidth )
                        // console.log(mo.name.length*font.pixelSize+mo.tab*fileList.tabWidth)
                    }
                }
            }
        }

        TabView {
            id: tabView
            function addTabCus(tabName, content, flag = 'web'){ // 添加tab
                let tab = tabView.addTab(tabName);
                let txtCom =  null;
                let txtControl = null;
                if(flag === "web"){
                    txtCom = Qt.createComponent("qrc:/cus/TabWeb.qml")
                    txtControl = txtCom.createObject(tab)
                }else{
                    txtCom = Qt.createComponent("qrc:/cus/TabTxt.qml")
                    txtControl = txtCom.createObject(tab)
                    txtControl.txtValue = content;
                }
                tabView.currentIndex=(tabView.count-1)
                return txtControl
            }

            Tab {
                title: "Red"
                TabWeb{ id:noid }
            }

            style: TabViewStyle {
                frameOverlap: 1
                tab: Rectangle {
                    color: styleData.selected ? "steelblue" :"lightblue"
                    implicitWidth: 120
                    implicitHeight: 20
                    radius: 2
                    Text {
                        id: tabText
                        anchors.centerIn: parent
                        text: styleData.title
                        color: styleData.selected ? "white" : "black"
                        width: 100
                        elide: Text.ElideRight
                        Component.onCompleted:{
                            let txtWidth = commonUtil.getTextWidth(styleData.title, tabText.font.pixelSize)
                            tabText.width = txtWidth<100?txtWidth:100
                            // console.log(commonUtil.getTextWidth(styleData.title, 12))
                        }
                    }
                    Image {
                        id: tabCloseImg
                        width: 14
                        height: 14
                        anchors.right:parent.right
                        anchors.rightMargin: 5
                        anchors.verticalCenter: parent.verticalCenter
                        source: "qrc:img/close-tab.png"
                        MouseArea {
                            anchors.fill: parent
                            onClicked: tabView.removeTab(styleData.index)
                        }
                    }
                }
                frame: Rectangle { color: "steelblue" }
            }
        }
    }

    Toast {
        id:toast
        objectName: "toast"
        visible: false
        x:(parent.width-width)/2
        y:(parent.height-height)/3
    }

}

/*##^##
Designer {
    D{i:0;formeditorZoom:0.75}
}
##^##*/
